<template>
	<view>
		<u-toast ref="uToast" /><u-no-network></u-no-network>
		<u-navbar title="商品详情" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>
		<!--幻灯片-->
		<u-swiper height="calc(750rpx * 6 / 6)" radius="0" :list="goodsInfo.album" :autoplay="autoplay" indicator
			indicatorMode="line" circular @click="clickImg"></u-swiper>

		<view
			class="coreshop-margin-left-8 coreshop-margin-right-8  coreshop-margin-top-12 coreshop-padding-8 coreshop-border-radius-9 coreshop-bg-white">
			<view class="coreshop-flex coreshop-justify-between coreshop-align-center">
				<view class="coreshop-text-red coreshop-font-weight-bold" v-if="priceSection==product.price">
					<text class="coreshop-font-16">活动售价：¥</text>
					<text class="coreshop-font-24">{{ product.price || '0.00' }}</text>
				</view>
				<view class="coreshop-text-red coreshop-font-weight-bold" v-if="priceSection!=product.price">
					<text class="coreshop-font-16">¥</text>
					<text class="coreshop-font-24">{{ product.price || '0.00' }}</text>
				</view>
				<view
					class="coreshop-flex coreshop-text-left coreshop-margin-left-12 coreshop-margin-top-6  coreshop-justify-start coreshop-align-center"
					v-if="priceSection>product.price">
					<view class="coreshop-font-16 coreshop-text-gray coreshop-text-through">活动售价：¥{{ priceSection }}
					</view>
				</view>
			</view>
			<view class="coreshop-flex coreshop-flex-wrap coreshop-flex-direction-row coreshop-margin-top-12"
				v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && product.pointsDeduction > 0">
				<view class="coreshop-padding-bottom-5 coreshop-font-12">
					兑换价：{{pointDiscountedProportion * product.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(product.price-product.pointsDeduction).toFixed(2)}}元
				</view>
				<view class="coreshop-font-12 coreshop-margin-left-12"
					v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && product.points > 0">
					买就送：{{product.points}}{{ pointShowName}}</view>
			</view>
			<view class="coreshop-flex coreshop-flex-wrap coreshop-flex-direction-column coreshop-margin-left-12"
				v-else>
				<view class="coreshop-flex coreshop-flex-wrap coreshop-flex-direction-row">
					<view class="coreshop-font-12"
						v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && product.points > 0">
						买就送：{{product.points}}{{ pointShowName}}</view>
				</view>
			</view>
			<view class="coreshop-margin-top-12 coreshop-multiple-line-clamp">
				<text
					class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">{{ goodsInfo.name || '' }}</text>
			</view>
			<view class="coreshop-margin-top-8 coreshop-multiple-line-clampNoDot">
				<text class="coreshop-font-14 coreshop-text-gray">{{ goodsInfo.brief || '' }}</text>
			</view>
			<view class="coreshop-flex coreshop-margin-top-8" v-if="goodsInfo.brand || goodsInfo.labels">
				<u-tag :text="goodsInfo.brand.name" v-if="goodsInfo.brand"></u-tag>
				<view class="coreshop-margin-left-6" v-for="item in goodsInfo.labels" :key="item.id">
					<u-tag :text="item.name" :bgColor="item.style" :borderColor="item.style"></u-tag>
				</view>
			</view>
			<view
				class="coreshop-margin-top-8 coreshop-padding-top-16 coreshop-solid-top coreshop-flex coreshop-justify-between coreshop-align-center coreshop-text-gray">
				<view class="coreshop-font-12">
					<text>销量：</text>
					<text class="font-color-orange">{{ goodsInfo.buyCount || '0' }}</text>
				</view>
				<view class="coreshop-font-12">
					<u-icon name="share-fill" size="18" label="分享" :labelSize="12" labelPos="right"
						@click="goShare"></u-icon>
				</view>
				<view class="coreshop-font-12">
					<u-icon name="star-fill" :size="18" label="收藏" :labelSize="12" labelPos="right" @click="collection"
						v-if="isfav"></u-icon>
					<u-icon name="star" :size="18" label="收藏" :labelSize="12" labelPos="right" @click="collection"
						v-else></u-icon>
				</view>
			</view>
		</view>

		<!--促销-->
		<view
			class="coreshop-margin-left-8 coreshop-margin-right-8  coreshop-margin-top-12 coreshop-padding-8 coreshop-border-radius-9 coreshop-bg-white"
			v-if="promotion.length > 0" @tap="promotionTap">
			<view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row">
				<view class="coreshop-basis-2">
					<text class="coreshop-text-gray">促销</text>
				</view>
				<view class="coreshop-basis-7">
					<view v-for="(item, index) in promotion" :key="index"
						:class="index> 1 ? 'coreshop-margin-top-10':''">
						<text class="cu-tag line-orange sm radius">{{item.name}}</text>
					</view>
				</view>
				<view class="coreshop-basis-1">
					<view class="coreshop-float-right">
						<u-icon name="arrow-right-double"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view
			class="coreshop-margin-left-8 coreshop-margin-right-8  coreshop-margin-top-12 coreshop-padding-8 coreshop-border-radius-9 coreshop-bg-white">
			<!--全局促销-->
			<view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row"
				@tap="promotionListTap" v-if="promotionList.length>0">
				<view class="coreshop-basis-2">
					<text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">优惠</text>
				</view>
				<view class="coreshop-basis-7 coreshop-flex coreshop-align-center">
					<view
						class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row coreshop-align-center">
						<u-icon name="info-circle" size="12" labelSize="12" color="#e54d42" :label="item.name"
							v-for="(item, index) in promotionList" :key="index"
							style="margin-right: 10px; margin-bottom: 10px;"></u-icon>
					</view>
				</view>
				<view class="coreshop-basis-1">
					<view class="coreshop-float-right">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view class="coreshop-solid-bottom coreshop-margin-top-10 coreshop-margin-bottom-10"
				v-if="promotionList.length>0" />
			<!--服务-->
			<view
				class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row coreshop-padding-top-10"
				@tap="serviceTap" v-if="serviceDescription.service.length>0">
				<view class="coreshop-basis-2">
					<text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">服务</text>
				</view>
				<view class="coreshop-basis-7 coreshop-flex coreshop-align-center">
					<view
						class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row coreshop-align-center">
						<u-icon name="checkmark-circle" size="12" labelSize="12" color="#e54d42" :label="item.title"
							v-for="(item, index) in serviceDescription.service" :key="index"
							class="coreshop-margin-right-10"></u-icon>
					</view>
				</view>
				<view class="coreshop-basis-1">
					<view class="coreshop-float-right">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<!--发货-->
			<view class="coreshop-solid-bottom coreshop-margin-top-10 coreshop-margin-bottom-10"
				v-if="serviceDescription.delivery.length>0" />
			<view
				class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row coreshop-padding-top-10"
				v-if="serviceDescription.delivery.length>0">
				<view class="coreshop-basis-2">
					<text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">发货</text>
				</view>
				<view class="coreshop-coreshop-basis-8 coreshop-flex coreshop-align-center">
					<text class="coreshop-font-sm" v-for="(item, index) in serviceDescription.delivery"
						:key="index">{{item.description}}</text>
				</view>
			</view>
			<!--规格-->
			<view class="coreshop-solid-bottom coreshop-margin-top-10 coreshop-margin-bottom-10" />
			<view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-padding-top-10" @tap="openSkuPopup">
				<view class="coreshop-basis-2">
					<text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">规格</text>
				</view>
				<view class="coreshop-basis-7 coreshop-flex coreshop-align-center">
					<text class="coreshop-font-sm">{{ product.spesDesc || ''}}</text>
				</view>
				<view class="coreshop-basis-1">
					<view class="coreshop-float-right">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>


		<!--代理价格体系-->
		<view
			class="coreshop-margin-left-8 coreshop-margin-right-8  coreshop-margin-top-12 coreshop-padding-8 coreshop-border-radius-9 coreshop-bg-white"
			v-if="userAgent && userAgentGrade">
			<view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row">
				<view class="coreshop-basis-4">
					<text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">代理价格</text>
				</view>
				<view class="coreshop-basis-6">
					<view class="coreshop-float-right">
						您的等级：{{userAgentGrade.name}}
					</view>
				</view>
			</view>
			<view v-if="agentProducts.length">
				<view class="goods-agent-box">
					<view class="goods-agent-line">
						<view class="name coreshop-line-height-34">
							<text>货品名称</text>
						</view>
						<view class="productPrice coreshop-line-height-34">
							<text>销售价</text>
						</view>
						<view class="agentGradePrice coreshop-line-height-34">
							<text>代理价</text>
						</view>
						<view class="profit coreshop-line-height-34">
							<text>利润</text>
						</view>
					</view>
					<view class="goods-agent-line" v-for="(item, index) in agentProducts" :key="index">
						<view class="name coreshop-line-height-24 coreshop-padding-4">
							<text>{{item.name}}</text>
						</view>
						<view class="productPrice coreshop-display-flex coreshop-align-center coreshop-justify-center">
							<text>{{item.productPrice}}</text>
						</view>
						<view
							class="agentGradePrice coreshop-display-flex coreshop-align-center coreshop-justify-center">
							<text>{{item.agentGradePrice}}</text>
						</view>
						<view class="profit coreshop-display-flex coreshop-align-center coreshop-justify-center">
							<text>{{ parseFloat(item.productPrice-item.agentGradePrice).toFixed(2)}}</text>
						</view>
					</view>
				</view>
				<view class="coreshop-font-12 coreshop-line-height-34">
					注：此利润不为最终用户下单后利润，因为订单可能存在优惠。
				</view>
			</view>
			<view class="coreshop-margin-top-8" v-else>
				<text class="coreshop-text-gray coreshop-font-12">该商品暂未录入商品池价格</text>
			</view>
		</view>

		<!--评论-->
		<view
			class="coreshop-margin-left-8 coreshop-margin-right-8  coreshop-margin-top-12 coreshop-padding-8 coreshop-border-radius-9 coreshop-bg-white"
			v-if="false">
			<view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row">
				<view class="coreshop-basis-3">
					<text
						class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">评价（{{commentsCount}}）</text>
				</view>
				<view class="coreshop-basis-3"></view>
				<view class="coreshop-basis-4">
					<view class="coreshop-float-right">
						<u-icon name="arrow-right" label="查看更多" labelPos="left" labelSize="12px"
							labelColor="color['u-content-color']" @tap="goGoodComments(goodsInfo.id)"></u-icon>
					</view>
				</view>
			</view>
			<view v-if="goodsComments.length">
				<view v-for="(item, index) in goodsComments" :key="index">
					<view class="coreshop-solid-bottom coreshop-margin-top-10 coreshop-margin-bottom-10" />
					<view
						class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-padding-10 coreshop-flex-direction-row">
						<view class="coreshop-basis-1">
							<view class="coreshop-avatar sm round"
								:style="[{backgroundImage:'url('+ item.avatarImage +')'}]" />
						</view>
						<view class="coreshop-basis-9 coreshop-font-sm">
							<view>{{ (item.nickName && item.nickName != '')?item.nickName:item.mobile }}</view>
							<view class="coreshop-margin-top-10">{{ item.contentBody || ''}}</view>
							<view class="coreshop-text-gray coreshop-margin-top-5">
								<u-rate v-model="item.score" :count="5" size="15"></u-rate>
							</view>
							<view class="coreshop-margin-top-10" v-if="item.imagesArr">
								<u-album :urls="item.imagesArr" rowCount="4"></u-album>
							</view>
							<view class="coreshop-text-gray coreshop-margin-top-5 coreshop-font-12">
								{{ item.createTime || ''}} {{ item.addon || ''}}
							</view>
							<view
								class="coreshop-bg-gray coreshop-padding-10 coreshop-border-radius-tr-16 coreshop-margin-top-10"
								v-if="item.sellerContent">
								商家回复：{{item.sellerContent}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="coreshop-margin-top-8" v-else>
				<text class="coreshop-text-gray coreshop-font-12">该商品暂无评价</text>
			</view>
		</view>

		<!--参数-->
		<view
			class="coreshop-margin-left-8 coreshop-margin-right-8  coreshop-margin-top-12 coreshop-padding-8 coreshop-border-radius-9 coreshop-bg-white"
			v-if="goodsParams.length>0">
			<view>
				<text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">参数</text>
			</view>
			<view class="goods-param-box">
				<view class="goods-param-line" v-for="(item, index) in goodsParams" :key="index">
					<view class="name">
						<text>{{item.name}}</text>
					</view>
					<view class="value">
						<text>{{item.value}}</text>
					</view>
				</view>
			</view>
		</view>

		<!--内容区-->
		<view
			class="coreshop-margin-top-8 coreshop-margin-bottom-12 coreshop-flex coreshop-justify-center coreshop-align-center">
			<view class="line-70"></view>
			<view class="coreshop-margin-left-12 coreshop-margin-right-12 coreshop-text-gray">详情介绍</view>
			<view class="line-70"></view>
		</view>
		<view class="coreshop-margin-top-10 coreshop-bg-white">
			<u-parse :content="goodsInfo.intro" :selectable="true" v-if="goodsInfo.intro"></u-parse>
			<!-- 无数据时默认显示 -->
			<view class="coreshop-emptybox coreshop-padding-10" v-else>
				<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/data.png'" icon-size="150"
					text="详情为空" mode="list"></u-empty>
			</view>
		</view>

		<!-- 分享弹窗 -->
		<view class="coreshop-padding-0">
			<u-popup mode="bottom" :show="shareBox" ref="share">
				<!-- #ifdef MP-WEIXIN -->
				<coreshop-share-wx :shareType='$globalConstVars.shareType.goods' :goodsId="goodsInfo.id"
					:shareImg="goodsInfo.image" :shareTitle="goodsInfo.name" :shareContent="goodsInfo.brief"
					:shareHref="shareHref" @close="closeShare()"></coreshop-share-wx>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS || APP-PLUS-NVUE -->
				<coreshop-share-app :shareType='$globalConstVars.shareType.goods' :goodsId="goodsInfo.id"
					:shareImg="goodsInfo.image" :shareTitle="goodsInfo.name" :shareContent="goodsInfo.brief"
					:shareHref="shareHref" @close="closeShare()"></coreshop-share-app>
				<!-- #endif -->
			</u-popup>
			<div id="qrCode" ref="qrCodeDiv"></div>
		</view>

		<!--常见问题-->
		<view
			class="coreshop-margin-left-8 coreshop-margin-right-8  coreshop-margin-top-12 coreshop-padding-8 coreshop-border-radius-9 coreshop-bg-white">
			<view class="coreshop-margin-bottom-16">
				<text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">常见问题</text>
			</view>
			<view class="coreshop-flex coreshop-flex-wrap coreshop-margin-bottom-10 coreshop-flex-direction-row"
				v-for="(item, index) in serviceDescription.commonQuestion" :key="index">
				<view class="coreshop-basis-2 coreshop-font-13">
					{{item.title}}
				</view>
				<view class="coreshop-basis-8">
					<view class="coreshop-font-12">{{item.description}}</view>
				</view>
			</view>
			<view class="coreshop-solid-bottom coreshop-margin-top-10 coreshop-margin-bottom-10" />
			<view class="coreshop-text-center coreshop-text-blue  coreshop-padding-top-10 coreshop-font-13"
				@tap="goArticleList()">查看更多问题</view>
		</view>

		<!--为您推荐-->
		<view
			class="coreshop-margin-top-8 coreshop-margin-bottom-12 coreshop-flex coreshop-justify-center coreshop-align-center"
			v-if="shopRecommendData.length > 0">
			<view class="line-70"></view>
			<view class="coreshop-margin-left-12 coreshop-margin-right-12 coreshop-text-gray">为您推荐</view>
			<view class="line-70"></view>
		</view>

		<view class="waterfall " v-if="shopRecommendData.length > 0">
			<uv-waterfall ref="waterfall" v-model="shopRecommendData" :add-time="10" :left-gap="leftGap"
				:right-gap="rightGap" :column-gap="columnGap" @changeList="changeList">
				<!-- 第一列数据 -->
				<template v-slot:list1>
					<!-- 为了磨平部分平台的BUG，必须套一层view -->
					<view>
						<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item"
							@tap="goGoodsDetail(item.id)">
							<view class="coreshop-margin-bottom-10">
								<view class="waterfall-item__image" :style="[imageStyle(item)]">
									<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
								</view>
								<view
									class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
									<view class="coreshop-title-294 coreshop-multiple-line-clamp">
										<text class="coreshop-font-14">{{item.name}}</text>
									</view>
									<view
										class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
										<view class="coreshop-text-red coreshop-font-weight-bold">
											<text class="coreshop-font-12">¥</text>
											<text class="coreshop-font-16">{{item.price}}</text>
											<span
												class="coreshop-font-xs  coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
										</view>
										<view>
											<text
												class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
										</view>
									</view>
									<view
										class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top"
										v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
										<view>
											{{ pointShowName}}兑换价:
										</view>
										<view class="coreshop-text-red">
											{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}}
											元
										</view>
									</view>
									<view
										class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5"
										v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
										<view>
											购买赠送:
										</view>
										<view class="coreshop-text-red">
											{{item.points}}{{ pointShowName}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
				<!-- 第二列数据 -->
				<template v-slot:list2>
					<!-- 为了磨平部分平台的BUG，必须套一层view -->
					<view>
						<view v-for="(item, index) in list2" :key="item.id" class="waterfall-item"
							@tap="goGoodsDetail(item.id)">
							<view class="coreshop-margin-bottom-10">
								<view class="waterfall-item__image" :style="[imageStyle(item)]">
									<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
								</view>
								<view
									class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
									<view class="coreshop-title-294 coreshop-multiple-line-clamp">
										<text class="coreshop-font-14">{{item.name}}</text>
									</view>
									<view
										class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
										<view class="coreshop-text-red coreshop-font-weight-bold">
											<text class="coreshop-font-12">¥</text>
											<text class="coreshop-font-16">{{item.price}}</text>
											<span
												class="coreshop-font-xs  coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
										</view>
										<view>
											<text
												class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
										</view>
									</view>
									<view
										class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top"
										v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
										<view>
											{{ pointShowName}}兑换价:
										</view>
										<view class="coreshop-text-red">
											{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}}
											元
										</view>
									</view>
									<view
										class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5"
										v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
										<view>
											购买赠送:
										</view>
										<view class="coreshop-text-red">
											{{item.points}}{{ pointShowName}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
			</uv-waterfall>
		</view>

		<!--占位底部距离-->
		<view class="coreshop-tabbar-height" />

		<!--底部操作-->
		<view class="coreshop-good-footer-fixed">
			<view class="tabbar">
				<view
					class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-start coreshop-basis-4">
					<!-- 客服按钮 -->
					<!-- #ifdef APP-PLUS-NVUE || APP-PLUS -->
					<view class="action" @click="showChat()">
						<button class="noButtonStyle" style="width: 120rpx;">
							<u-icon name="server-fill" :size="20" label="找客服" :labelSize="12"
								labelPos="bottom"></u-icon>
						</button>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="action">
						<button style="width: 120rpx;" open-type="contact" bindcontact="showChat" class="noButtonStyle"
							:send-message-title="goodsInfo.name"
							:send-message-path="'/pages/goods/goodDetails/goodDetails?id='+goodsInfo.id"
							:send-message-img="goodsInfo.image" show-message-card="true">
							<u-icon name="server-fill" :size="20" label="找客服" :labelSize="12" space="5px"
								labelPos="bottom"></u-icon>
						</button>
					</view>
					<!-- #endif -->
					<view class="action" @click="redirectCart">
						<button class="noButtonStyle" style="width: 120rpx;">
							<u-badge type="warning" :value="cartNums" showZero="false" absolute="true"
								:offset="[1, 4]"></u-badge>
							<u-icon name="shopping-cart-fill" :size="24" label="购物车" :labelSize="12" space="1px"
								labelPos="bottom"></u-icon>
						</button>
					</view>
				</view>

				<view class="coreshop-border-radius-20 coreshop-flex coreshop-align-end coreshop-flex-sub">
					<view class="btn-add-shopcar" @click="openSkuPopup">
						<text>加入购物车</text>
					</view>
					<view class="btn-buy" @click="openSkuPopup">
						<text>立即购买</text>
					</view>
				</view>

			</view>
		</view>

		<!--弹出框-->
		<u-popup class="coreshop-bottom-popup-box" :show="bottomModal" mode="bottom" @close="hideModal"
			:closeable="true" :safeAreaInsetTop="true">
			<view class="radius coreshop-bg-white">
				<!--标题-->
				<view
					class="coreshop-text-black coreshop-text-center coreshop-margin-top-15 coreshop-margin-bottom-15 coreshop-font-lg coreshop-title-bar">
					<text>{{modalTitle}}</text>
				</view>
				<!--内容区域-->
				<view class="coreshop-modal-content" style="max-height: calc(100vh - 327.5px); overflow-y: auto; ">
					<!--服务区域-->
					<view class="coreshop-common-view-box service" v-if="modalType=='service'">
						<view v-for="(item, index) in serviceDescription.service" :key="index">
							<view
								class="coreshop-font-md coreshop-padding-bottom-10 coreshop-padding-top-10 coreshop-flex-direction-row">
								<u-icon name="checkmark-circle" color="#e54d42" :label="item.title" labelSize="15px"
									label-pos="right"></u-icon>
							</view>
							<view
								class="coreshop-font-sm coreshop-text-gray coreshop-padding-bottom-5 coreshop-padding-top-5">
								{{item.description}}
							</view>
						</view>
					</view>

					<!--促销区域-->
					<view class="coreshop-common-view-box promotion" v-if="modalType=='promotion'">
						<view class="text-view" v-for="(item, index) in promotion" :key="index">
							<text class="cu-tag line-orange radius sm">{{item.name}}</text>
							<text class="coreshop-margin-left-10 u-line-5 coreshop-text-black">{{item.name}}</text>
						</view>
					</view>

					<!--全平台促销区域-->
					<view class="coreshop-common-view-box promotion" v-if="modalType=='promotionList'">
						<view class="coreshop-solid coreshop-padding-10 coreshop-margin-bottom-10"
							v-for="(item, index) in promotionList" :key="index">
							<view
								class="coreshop-flex coreshop-flex-wrap coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-padding-bottom-10">
								<u--text :text="'活动'+(index+1)+'：'+item.name" size="17" bold="true"
									:lines="2"></u--text>
							</view>
							<u-line margin="10rpx 0"></u-line>
							<view
								class="coreshop-flex coreshop-flex-wrap coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-padding-top-8"
								v-if="item.conditions">
								<view
									class="coreshop-text-grey coreshop-font-14 coreshop-flex coreshop-flex-wrap coreshop-align-center coreshop-flex-direction-row coreshop-justify-start">
									<view class="coreshop-margin-right-5">
										<u-icon name="setting" size="18"></u-icon>
									</view>
									<view
										class="coreshop-text-grey coreshop-font-13 coreshop-flex coreshop-flex-wrap coreshop-align-center coreshop-flex-direction-row coreshop-justify-start">
										满足条件：<view class="coreshop-text-red">要求同时满足下面所有条件</view>
									</view>
								</view>
							</view>
							<u-line margin="10rpx 0"></u-line>
							<view class="coreshop-flex coreshop-flex-direction coreshop-justify-start">
								<text class="coreshop-font-sm coreshop-margin-bottom-5 coreshop-margin-top-5"
									style="line-height: 20px;" v-for="(itemC, indexC) in item.conditions" :key="indexC">
									条件{{indexC+1}} ：{{itemC}}
								</text>
							</view>
							<u-line margin="10rpx 0"></u-line>
							<view
								class="coreshop-flex coreshop-flex-wrap coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-padding-top-8"
								v-if="item.results">
								<view
									class="coreshop-text-grey coreshop-font-14 coreshop-flex coreshop-flex-wrap coreshop-align-center coreshop-flex-direction-row coreshop-justify-start">
									<view class="coreshop-margin-right-5">
										<u-icon name="bell" size="18"></u-icon>
									</view>
									<view
										class="coreshop-text-grey coreshop-font-13 coreshop-flex coreshop-flex-wrap coreshop-align-center coreshop-flex-direction-row coreshop-justify-start">
										活动结果：<view class="coreshop-text-red">{{item.results[0]}}</view>
									</view>
								</view>
							</view>
							<u-line margin="10rpx 0"></u-line>
							<view
								class="coreshop-flex coreshop-flex-wrap coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-padding-bottom-10">
								<view
									class="coreshop-flex coreshop-flex-wrap coreshop-align-center coreshop-flex-direction-row coreshop-justify-start">
									<view class="coreshop-margin-right-5">
										<u-icon name="calendar" size="18"></u-icon>
									</view>
									<view class="coreshop-text-grey coreshop-font-13">
										活动时间：{{$u.timeFormat(item.startTime, 'yyyy-mm-dd hh:MM')}} 至
										{{$u.timeFormat(item.endTime, 'yyyy-mm-dd hh:MM')}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>


		<vk-data-goods-sku-popup ref="skuPopup" v-model="skuKey" border-radius="20" :amount-type="0"
			:localdata="goodsSkuInfo" :mode="skuMode" @open="onOpenSkuPopup" @close="onCloseSkuPopup"
			@add-cart="addCart" @buy-now="buyNow"></vk-data-goods-sku-popup>

		<!-- 右边浮动球 -->
		<coreshop-fab horizontal="right" vertical="bottom" direction="vertical"></coreshop-fab>
		<!-- 登录提示 -->
		<coreshop-login-modal></coreshop-login-modal>
	</view>

</template>
<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				// 是否打开SKU弹窗
				skuKey: false,
				// SKU弹窗模式
				skuMode: 1,
				// 后端返回的商品信息
				goodsSkuInfo: {},
				goodsId: 0, // 商品id
				goodsInfo: {}, // 商品详情
				cartNums: 0, // 购物车数量
				product: {}, // 货品详情
				priceSection: '',
				shopRecommendData: [], // 本店推荐数据
				goodsParams: [], // 商品参数信息
				goodsComments: [], // 商品评论信息
				commentsCount: 0, // 商品评论信息
				type: 2, // 1加入购物车 2购买
				cartType: this.$globalConstVars.paymentType.common,
				isfav: false, // 商品是否收藏
				bottomModal: false,
				modalTitle: '',
				modalType: 'promotion',
				selectType: '',
				shareUrl: this.$globalConstVars.shareUrl,
				shareBox: false,
				serviceDescription: {
					commonQuestion: [],
					delivery: [],
					service: [],
				},
				autoplay: true,
				userAgent: {},
				userAgentGrade: {},
				agentProducts: [],
				promotionList: [],
				list1: [], // 瀑布流第一列数据
				list2: [], // 瀑布流第二列数据
				leftGap: 10,
				rightGap: 10,
				columnGap: 10
			}
		},
		onLoad(options) {
			var _this = this
			if (this.$db.get('userToken')) {
				this.$u.api.userInfo().then(res => {
					if (res.status) {
						_this.userInfo = res.data
						_this.hasLogin = true;
						// #ifdef MP-WEIXIN
						//微信小程序打开客服时，传递用户信息
						var kefupara = {}
						kefupara.nickName = res.data.nickname
						kefupara.tel = res.data.mobile
						_this.kefupara = JSON.stringify(kefupara)
						// #endif
					} else {
						//this.hasLogin = false
						//this.$store.commit('showLoginTip', true);

					}
				})
			} else {
				//this.hasLogin = false
				//this.$store.commit('showLoginTip', true);
			}

			//获取商品ID
			if (options.id != '') {
				this.goodsId = options.id;
			}
			if (this.goodsId) {
				this.getServiceDescription();
				this.getGoodsDetail();
				this.getGoodsParams();
				this.getGoodsComments();
			} else {
				this.$refs.uToast.show({
					message: '获取失败',
					type: 'error',
					complete: function() {
						uni.navigateBack({
							delta: 1
						});
					}
				});
			}
			// 获取购物车数量
			this.getCartNums();
			//获取推荐商品数据
			this.getGoodsRecommendList();

			var _this = this

			this.getPromotionList();
		},
		onShow() {},
		computed: {
			...mapState({
				hasLogin: state => state.hasLogin,
				userInfo: state => state.userInfo,
			}),
			hasLogin: {
				get() {
					return this.$store.state.hasLogin;
				},
				set(val) {
					this.$store.commit('hasLogin', val);
				}
			},
			userInfo: {
				get() {
					return this.$store.state.userInfo;
				},
				set(val) {
					this.$store.commit('userInfo', val);
				}
			},
			pointSwitch() {
				return this.$store.state.config.pointSwitch
			},
			pointShowExchangePrice() {
				return this.$store.state.config.pointShowExchangePrice
			},
			pointDiscountedProportion() {
				return this.$store.state.config.pointDiscountedProportion
			},
			pointExchangeModel() {
				return this.$store.state.config.pointExchangeModel
			},
			pointShowName() {
				return this.$store.state.config.pointShowName
			},
			pointGetModel() {
				return this.$store.state.config.pointGetModel
			},
			pointShowPoint() {
				return this.$store.state.config.pointShowPoint
			},
			shopName() {
				return this.$store.state.config.shopName;
			},
			shareTitle() {
				return this.$store.state.config.shareTitle;
			},
			shopLogo() {
				return this.$store.state.config.shopLogo;
			},
			// 获取店铺联系人手机号
			shopMobile() {
				return this.$store.state.config.shopMobile || 0;
			},
			// 优惠信息重新组装
			promotion() {
				let arr = [];
				if (this.product.promotionList) {
					for (let k in this.product.promotionList) {
						arr.push(this.product.promotionList[k]);
					}
				}
				return arr;
			},
			shareHref() {
				let pages = getCurrentPages()
				let page = pages[pages.length - 1]
				// #ifdef MP-WEIXIN || APP-PLUS || APP-PLUS-NVUE
				return this.$globalConstVars.apiBaseUrl + 'wap/' + page.route + '?id=' + this.goodsId;
				// #endif
			},
			imageStyle(item) {
				return item => {
					const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
					const w = v / 2;
					const rate = w / item.w;
					const h = rate * item.h;
					return {
						width: w + 'px',
						height: h + 'px'
					}
				}
			}
		},
		methods: {
			// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
			changeList(e) {
				this[e.name].push(e.value);
			},
			// 打开sku弹出
			openSkuPopup() {
				this.skuKey = true;
			},
			closeSkuPopup() {
				this.skuKey = false;
			},
			// sku组件监听
			onOpenSkuPopup() {
				//console.log("监听 - 打开sku组件");
			},
			onCloseSkuPopup() {
				//console.log("监听 - 关闭sku组件");
			},
			// 加入购物车按钮
			addCart(selectShop) {
				var that = this;
				uni.showLoading({
					title: '加载中'
				});
				if (!this.hasLogin) {
					uni.hideLoading();
					this.$store.commit('showLoginTip', true);
					return false;
				}
				if (selectShop.buy_num > 0) {
					let data = {
						productId: selectShop._id,
						nums: selectShop.buy_num,
						type: 1,
					}
					this.$u.api.addCart(data).then(res => {
						if (res.status) {
							uni.hideLoading();
							that.getCartNums(); // 获取购物车数量
							that.$refs.uToast.show({
								message: res.msg,
								type: 'success'
							});
						} else {
							that.$u.toast(res.msg);
							uni.hideLoading();
						}
					});
				}
				that.closeSkuPopup();
			},
			// 立即购买
			buyNow(selectShop) {
				var that = this;
				uni.showLoading({
					title: '加载中'
				});
				if (!this.hasLogin) {
					uni.hideLoading();
					this.$store.commit('showLoginTip', true);
					return false;
				}
				if (selectShop.buy_num > 0) {
					let data = {
						productId: selectShop._id,
						nums: selectShop.buy_num,
						type: 2,
						cartType: this.cartType
					}
					this.$u.api.addCart(data).then(res => {
						if (res.status) {
							let cartIds = res.data;
							that.$u.route('/pages/placeOrder/index/index?cartIds=' + JSON.stringify(cartIds));
							uni.hideLoading();
						} else {
							this.$u.toast(res.msg);
							uni.hideLoading();
						}
					});
				}
				that.closeSkuPopup();
			},

			//获取服务项
			getServiceDescription() {
				let _this = this;
				this.$u.api.getServiceDescription().then(res => {
					if (res.status == true) {
						_this.serviceDescription.commonQuestion = res.data.commonQuestion;
						_this.serviceDescription.delivery = res.data.delivery;
						_this.serviceDescription.service = res.data.service;

					} else {
						_this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
							complete: function() {
								uni.navigateBack({
									delta: 1
								});
							}
						})
					}
				})
			},
			// 获取商品详情
			getGoodsDetail() {
				let _this = this;
				let data = {
					id: parseInt(this.goodsId),
					data: true
				}
				// 如果用户已经登录 要传用户token
				let userToken = this.$db.get("userToken");
				if (userToken) {
					this.$u.api.goodsDetailByToken(data).then(res => {
						if (res.status == true) {
							let info = res.data;
							_this.product = res.data.product;
							_this.goodsInfo = info;
							_this.goodsSkuInfo = res.data.skuList;
							if (res.otherData.agentProducts) {
								for (var i = 0; i < res.otherData.agentProducts.length; i++) {
									for (var j = 0; j < res.data.skuList.sku_list.length; j++) {
										if (res.data.skuList.sku_list[j]._id == res.otherData.agentProducts[i]
											.productId) {
											res.otherData.agentProducts[i].name = res.data.skuList.sku_list[j]
												.sku_name_arr[0];
											break;
										}
									}
								}
								console.log(res.otherData.agentProducts);
								_this.agentProducts = res.otherData.agentProducts;
							}

							if (res.otherData && res.otherData.userAgentGrade) {
								_this.userAgentGrade = res.otherData.userAgentGrade;
							} else {
								_this.userAgentGrade = null;
							}

							if (res.otherData && res.otherData.userAgent) {
								_this.userAgent = res.otherData.userAgent;
							} else {
								_this.userAgent = null;
							}

							//价格区间
							if (res.data.minPrice != res.data.maxPrice) {
								_this.priceSection = res.data.minPrice + '~' + res.data.maxPrice;
							} else {
								_this.priceSection = res.data.product.mktprice;
							}

							if (_this.goodsInfo.album) {
								var albums = [];
								for (var i = 0; i < _this.goodsInfo.album.length; i++) {
									let album = {
										url: _this.goodsInfo.album[i],
										type: 'image'
									}
									albums.push(album);
								}
								_this.goodsInfo.album = albums;
								if (_this.goodsInfo.video) {
									let videoObj = {
										url: _this.goodsInfo.video,
										poster: _this.goodsInfo.image,
										type: 'video'
									}
									_this.goodsInfo.album.unshift(videoObj);
									_this.autoplay = false;
								}
							}
							_this.isfav = res.data.isFav;
							// 判断如果登录用户添加商品浏览足迹
							if (userToken) {
								_this.goodsBrowsing();
							}
						} else {
							_this.$refs.uToast.show({
								message: res.msg,
								type: 'error',
								complete: function() {
									uni.navigateBack({
										delta: 1
									});
								}
							})
						}
					})
				} else {
					this.$u.api.goodsDetail(data).then(res => {
						if (res.status == true) {
							_this.goodsInfo = res.data;
							_this.product = res.data.product;
							_this.goodsSkuInfo = res.data.skuList;

							if (res.otherData && res.otherData.userAgentGrade) {
								_this.userAgentGrade = res.otherData.userAgentGrade;
							} else {
								_this.userAgentGrade = null;
							}

							if (res.otherData && res.otherData.userAgent) {
								_this.userAgent = res.otherData.userAgent;
							} else {
								_this.userAgent = null;
							}

							//价格区间
							if (res.data.minPrice != res.data.maxPrice) {
								_this.priceSection = res.data.minPrice + '~' + res.data.maxPrice;
							} else {
								_this.priceSection = res.data.product.mktprice;
							}

							if (_this.goodsInfo.album) {
								var albums = [];
								for (var i = 0; i < _this.goodsInfo.album.length; i++) {
									let album = {
										url: _this.goodsInfo.album[i],
										type: 'image'
									}
									albums.push(album);
								}
								_this.goodsInfo.album = albums;
								if (_this.goodsInfo.video) {
									let videoObj = {
										url: _this.goodsInfo.video,
										poster: _this.goodsInfo.image,
										type: 'video'
									}
									_this.goodsInfo.album.unshift(videoObj);
									_this.autoplay = false;
								}
							}
							_this.isfav = res.data.isFav;
							// 判断如果登录用户添加商品浏览足迹
							if (userToken) {
								_this.goodsBrowsing();
							}
						} else {
							_this.$refs.uToast.show({
								message: res.msg,
								type: 'error',
								complete: function() {
									uni.navigateBack({
										delta: 1
									});
								}
							})
						}
					})
				}
			},
			// 获取推荐商品信息
			getGoodsRecommendList() {
				let _this = this;
				let recommenddata = {
					id: 10,
					data: true
				}
				_this.$u.api.getGoodsRecommendList(recommenddata).then(res => {
					if (res.status) {
						_this.shopRecommendData = _this.$u.randomArray(res.data);
					} else {
						_this.$u.toast(res.msg)
					}
				});
			},
			// 获取购物车数量
			getCartNums() {
				let userToken = this.$db.get("userToken");
				if (userToken && userToken != '') {
					// 获取购物车数量
					this.$u.api.getCartNum().then(res => {
						if (res.status) {
							this.cartNums = res.data;
						}
					})
				}
			},
			// 商品收藏/取消
			collection() {
				let data = {
					id: this.goodsInfo.id
				}
				this.$u.api.goodsCollection(data).then(res => {
					if (res.status) {
						this.isfav = !this.isfav;
						this.$refs.uToast.show({
							message: res.msg,
							type: 'success',
							back: false
						});
					} else {
						this.$u.toast(res.msg);
					}
				})
			},
			// 获取商品参数信息
			getGoodsParams() {
				this.$u.api.goodsParams({
					id: this.goodsId
				}).then(res => {
					if (res.status == true) {
						this.goodsParams = res.data;
					}
				})
			},
			// 获取商品评论信息
			getGoodsComments() {
				let data = {
					page: 1,
					limit: 5,
					id: this.goodsId,
				}
				this.$u.api.goodsComment(data).then(res => {
					if (res.status == true) {
						let _list = res.data.list;
						this.commentsCount = res.data.commentsCount;
						// 如果评论没有图片 在这块作处理否则控制台报错
						_list.forEach(item => {
							if (!item.hasOwnProperty('images')) {
								this.$set(item, 'images', [])
							}
						});
						this.goodsComments = [...this.goodsComments, ..._list];
					} else {
						this.$u.toast(res.msg);
					}
				})
			},
			// 添加商品浏览足迹
			goodsBrowsing() {
				let data = {
					id: this.goodsInfo.id
				}
				this.$u.api.addGoodsBrowsing(data).then(res => {});
			},
			// 跳转到h5分享页面
			goShare() {
				this.shareBox = true;
			},
			closeShare() {
				this.shareBox = false;
			},
			// 图片点击放大
			clickImg(index) {
				if (this.goodsInfo.album[index].type == 'image') {
					uni.previewImage({
						urls: [this.goodsInfo.album[index].url],
					});
				}
			},
			//在线客服
			showChat() {
				// #ifdef APP-PLUS || APP-PLUS-NVUE
				this.$u.route('/pages/member/customerService/index');
				// #endif
			},
			//获取分享URL
			getShareUrl() {
				let data = {
					client: this.$globalConstVars.shareClient.wxMiNiProgram,
					url: this.$globalConstVars.shareUrl,
					type: this.$globalConstVars.shareModel.url,
					page: this.$globalConstVars.shareType.goods,
					params: {
						goodsId: this.goodsInfo.id,
					}
				};
				let userToken = this.$db.get('userToken');
				if (userToken && userToken != '') {
					data.token = userToken
				}
				this.$u.api.share(data).then(res => {
					this.shareUrl = res.data
				});
			},
			serviceTap() {
				this.modalTitle = "说明";
				this.modalType = 'service';
				this.showModal();
			},
			promotionTap() {
				this.modalTitle = "促销优惠";
				this.modalType = 'promotion';
				this.showModal();
			},
			promotionListTap() {
				this.modalTitle = "全平台促销优惠";
				this.modalType = 'promotionList';
				this.showModal();
			},
			showModal() {
				this.bottomModal = true;
			},
			hideModal(e) {
				this.bottomModal = false;
				this.modalTitle = "";
				this.modalType = '';
			},
			getPromotionList() {
				let data = {
					id: this.$globalConstVars.promotionType.promotion,
				};
				this.$u.api.getPromotionList(data).then(res => {
					if (res.status) {
						this.promotionList = res.data;
					}
					console.log(data);
				});
			},
		},
		watch: {
			goodsInfo: {
				handler() {
					this.getShareUrl();
				},
				deep: true
			}
		},
		//分享
		onShareAppMessage(res) {
			return {
				title: this.goodsInfo.name,
				imageUrl: this.goodsInfo.image,
				path: this.shareUrl
			}
		},
		onShareTimeline(res) {
			return {
				title: this.goodsInfo.name,
				imageUrl: this.goodsInfo.image,
				path: this.shareUrl
			}
		},
	}
</script>
<style lang="scss">
	image {
		display: block;
	}

	/deep/.u-badge--warning {
		background-color: #D0241C !important;
	}

	.btn-buy {
		background-color: #D0241C !important;
	}
</style>